<?php
session_start();
if (!isset($_SESSION['username'])) {
    header('Location: login.php');
    exit();
}
require_once 'track_online.php';
$groupName = $_GET['group_name'] ?? null;

if (!$groupName) {
    die("未指定群聊！");
}

// 定义群聊文件路径
$qlDir = __DIR__ . '/ql';
$infoFile = $qlDir . '/info.json';

// 检查群聊信息文件是否存在
if (!file_exists($infoFile)) {
    die("群聊信息文件不存在！");
}

// 解析群聊信息文件
$groups = json_decode(file_get_contents($infoFile), true);
if (!is_array($groups)) {
    $groups = [];
}

// 找到匹配的群聊信息
$groupData = null;
$groupFolder = null;

foreach ($groups as $id => $group) {
    if ($group['name'] === $groupName) {
        $groupData = $group;
        $groupFolder = $id; // 群聊文件夹名
        break;
    }
}

if (!$groupData) {
    die("未找到对应的群聊！");
}

// 获取群成员数
$peopleFile = $qlDir . "/$groupFolder/people.json";
if (file_exists($peopleFile)) {
    $members = json_decode(file_get_contents($peopleFile), true);
    $memberCount = is_array($members) ? count($members) : 0;
} else {
    $memberCount = 0;
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($groupName) ?> - 群资料卡</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            min-height: 100vh;
        }
        
        /* 顶部导航栏 */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background: #ffffff;
            padding: 12px 20px;
            display: flex;
            align-items: center;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            z-index: 100;
            border-bottom: 1px solid #e0e4e9;
        }
        
        .back-btn {
            background: none;
            border: none;
            color: #000;
            font-size: 20px;
            margin-right: 15px;
            cursor: pointer;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .back-btn:hover {
            background: #e4e6eb;
        }
        
        .navbar-title {
            font-size: 18px;
            font-weight: 600;
            flex-grow: 1;
            color: #333;
        }
        
        /* 主内容区 */
        .content {
            margin-top: 70px;
            padding: 20px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        
        /* 群信息卡片 */
        .group-card {
            background: white;
            border-radius: 16px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            margin-bottom: 25px;
        }
        
        .group-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .group-avatar {
            width: 100px;
            height: 100px;
            border-radius: 16px;
            object-fit: cover;
            margin-right: 20px;
            background: #e0e4e9;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #7f8c8d;
            font-weight: bold;
            font-size: 32px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .group-info {
            flex-grow: 1;
        }
        
        .group-name {
            font-size: 24px;
            font-weight: bold;
            color: #222;
            margin-bottom: 5px;
        }
        
        .group-meta {
            color: #7f8c8d;
            font-size: 14px;
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 10px;
        }
        
        .meta-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .meta-icon {
            color: #3498db;
            font-size: 16px;
        }
        
        /* 详细信息卡片 */
        .detail-card {
            background: white;
            border-radius: 16px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            margin-bottom: 25px;
        }
        
        .card-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #f0f2f5;
            color: #222;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .card-title i {
            color: #3498db;
        }
        
        .detail-item {
            margin-bottom: 20px;
        }
        
        .detail-label {
            font-weight: 500;
            color: #7f8c8d;
            margin-bottom: 8px;
            font-size: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .detail-value {
            color: #495057;
            font-size: 16px;
            padding: 12px;
            background: #f8f9fa;
            border-radius: 12px;
            line-height: 1.5;
        }
        
        .tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }
        
        .tag {
            background: #e1f0fa;
            color: #3498db;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
        }
        
        /* 成员卡片 */
        .members-card {
            background: white;
            border-radius: 16px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        
        .members-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .members-title {
            font-size: 20px;
            font-weight: 600;
            color: #222;
        }
        
        .members-count {
            background: #e1f0fa;
            color: #3498db;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
        }
        
        .members-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
            gap: 20px;
        }
        
        .member-item {
            text-align: center;
        }
        
        .member-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: #3498db;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 20px;
            margin: 0 auto 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .member-name {
            font-size: 13px;
            color: #555;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .content {
                padding: 15px;
            }
            
            .group-header {
                flex-direction: column;
                text-align: center;
            }
            
            .group-avatar {
                margin-right: 0;
                margin-bottom: 15px;
            }
            
            .members-grid {
                grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
                gap: 15px;
            }
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .group-card, .detail-card, .members-card {
            animation: fadeIn 0.5s ease-out;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="navbar">
        <button class="back-btn" onclick="history.back()">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="navbar-title">群资料卡</div>
    </div>
    
    <div class="content">
        <!-- 群信息卡片 -->
        <div class="group-card">
            <div class="group-header">
                <?php if ($groupData['avatar']): ?>
                    <img src="<?= $groupData['avatar'] ?>" alt="群头像" class="group-avatar">
                <?php else: ?>
                    <div class="group-avatar">
                        <?= substr($groupName, 0, 1) ?>
                    </div>
                <?php endif; ?>
                
                <div class="group-info">
                    <div class="group-name"><?= htmlspecialchars($groupName) ?></div>
                    
                    <div class="group-meta">
                        <div class="meta-item">
                            <i class="fas fa-users meta-icon"></i>
                            <span><?= $memberCount ?> 位成员</span>
                        </div>
                        
                        <div class="meta-item">
                            <i class="fas fa-user meta-icon"></i>
                            <span>创建者: <?= htmlspecialchars($groupData['creator'] ?? '未知') ?></span>
                        </div>
                        
                        <div class="meta-item">
                            <i class="fas fa-calendar-alt meta-icon"></i>
                            <span>创建时间: <?= htmlspecialchars($groupData['created_at'] ?? '未知') ?></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 详细信息卡片 -->
        <div class="detail-card">
            <div class="card-title">
                <i class="fas fa-info-circle"></i>
                群聊信息
            </div>
            
            <div class="detail-item">
                <div class="detail-label">
                    <i class="fas fa-align-left"></i>
                    群介绍
                </div>
                <div class="detail-value">
                    <?= htmlspecialchars($groupData['description'] ?? '暂无群介绍') ?>
                </div>
            </div>
            
            <div class="detail-item">
                <div class="detail-label">
                    <i class="fas fa-tags"></i>
                    群标签
                </div>
                <div class="tags-container">
                    <?php if ($groupData['tags']): 
                        $tags = explode(',', $groupData['tags']);
                        foreach ($tags as $tag): 
                            if (trim($tag)): ?>
                                <span class="tag"><?= htmlspecialchars(trim($tag)) ?></span>
                            <?php endif;
                        endforeach;
                    else: ?>
                        <span class="tag">无标签</span>
                    <?php endif; ?>
                </div>
            </div>
        </div>
        
        <!-- 成员卡片 -->

        </div>
    </div>
</body>
</html>